<template>
	<view class="indexDetailsBox">
		<view class="indexDetailsBox-topBox">
			<view class="indexDetailsBox-topBox-top">
				<view class="indexDetailsBox-topBox-top-one">设备信息</view>
				<view class="indexDetailsBox-topBox-top-two">
					<view class="topLeft">
						<view class="item"><span class="item-name">设备编码:</span> <span
								class="item-num">{{fackData.transformerSn}}</span>
						</view>
						<view class="item"><span class="item-name">设备额定功率:</span><span
								class="item-num">{{fackData.power}}Kw</span>
						</view>
						<view class="item"><span class="item-name">地址</span><span
								class="item-num">{{fackData.address}}</span></view>
					</view>
					<view class="topRight">
						<view class="imgBox">
							<image :src="showID===1?'../../static/index/yd.png':showID===2?'../../static/index/cn.png':showID===3?'../../static/index/cdz.png':''" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="indexDetailsBox-bottom">
			<up-tabs :list="list" lineWidth="50" lineColor="#00AC79" :activeStyle="{
			            color: '#00AC79',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="itemClick">

			</up-tabs>
			<otherRealTime v-if="activeName===0" :itemList="fackItemList"></otherRealTime>
			<news v-if="activeName===1" :fackList="fackList" :fackObj="fackData"></news>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from 'vue'
	let {
		proxy
	} = getCurrentInstance();
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import otherRealTime from '@/components/otherRealTime/otherRealTime.vue'
	import news from '@/components/news/news.vue'
	const list = reactive([{
			name: '实时数据'
		},
		{
			name: '预警信息'
		}

	])
	let activeName = ref(0)
	const itemClick = (item) => {
		fackList.value=[]
		activeName.value = item.index
		
		if(item.index===1){
			fackList.value.push({
					
					text:`此设备电流异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年6月12日 17:00:19',
					status:0
				},
				{
					
					text:`此设备电流异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年6月15日 18:02:59',
					status:1
				},
				{
					
					text:`此设备电压存在异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年6月14日 13:12:00',
					status:0
				},
				{
					
					text:`此设备电压存在异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年6月10日 19:00:18',
					status:1
				},
				{
					
					text:`此设备电压存在异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年6月9日 12:00:29',
					status:0
				},
				{
					
					text:`此设备存在异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年5月31日 18:00:59',
					status:1
				},
				{
					
					text:`此设备存在异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年5月30日 14:00:32',
					status:0
				},
				{
					
					text:`此设备存在异常，请及时查看!`,
					code:`${fackData.value.transformerSn}`,
					time:'2024年5月25日 13:00:42',
					status:1
				})
		}
		
	}
	let fackData = ref({})
	let showID = ref(0)
	let fackItemList= ref([])
	let fackList=ref([])
	onLoad((option) => {
		fackItemList.value=[]
		fackList.value=[]
		fackData.value = JSON.parse(decodeURIComponent(option.item))
		if (fackData.value.name.includes('逆变器')) {
			showID.value = 1
			fackItemList.value.push({
				name:'电压',
				num:'300',
				unit:'Kv'
			},{
				name:'电流',
				num:'300',
				unit:'A'
			},
			{
				name:'实时功率',
				num:'300',
				unit:'Kw/h'
			},
			{
				name:'日发电量',
				num:'300',
				unit:'Kwh'
			},
			{
				name:'月发电量',
				num:'30000',
				unit:'Kwh'
			},
			{
				name:'年发电量',
				num:'900000',
				unit:'Kwh'
			}
			
			)
			
			
			
		} else if (fackData.value.name.includes('PCS')) {
			showID.value = 2
			fackItemList.value.push({
				name:'充电电压',
				num:'30',
				unit:'Kv'
			},{
				name:'充电电流',
				num:'300',
				unit:'A'
			},
			{
				name:'充电功率',
				num:'300',
				unit:'Kw/h'
			},
			{
				name:'放电电压',
				num:'200',
				unit:'Kv'
			},
			{
				name:'放电电流',
				num:'300',
				unit:'A'
			},
			{
				name:'放电功率',
				num:'245',
				unit:'Kw/h'
			},
			{
				name:'电池电量',
				num:'245000',
				unit:'Kwh'
			}
			
			)
		} else if (fackData.value.name.includes('充电桩')) {
			showID.value = 3
			fackItemList.value.push({
				name:'充电电压',
				num:'30',
				unit:'Kv'
			},{
				name:'充电电流',
				num:'300',
				unit:'A'
			},
			{
				name:'实时功率',
				num:'300',
				unit:'Kw/h'
			},
			{
				name:'需求功率',
				num:'250',
				unit:'Kw/h'
			},
			
			{
				name:'充电量',
				num:'245',
				unit:'Kw/h'
			},
			{
				name:'SOC',
				num:'200',
				unit:'Kwh'
			}
			
			)
		}
		
		
			
		
		

	})
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss">
	.indexDetailsBox {
		&-topBox {
			width: 100%;
			// height: 280rpx;
			background-image: url('../../static/bg.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;

			&-top {
				padding: 24rpx 32rpx;
				box-sizing: border-box;

				&-one {
					font-size: 32rpx;
					color: #000;
					font-weight: 550;
					margin-bottom: 38rpx;
				}

				&-two {
					display: flex;
					justify-content: space-between;

					.topLeft {
						flex: 70%;

						.item {
							margin-bottom: 15rpx;

							&-name {
								font-size: 28rpx;
								color: #333;
							}

							&-num {
								margin-left: 20rpx;
								font-size: 28rpx;
								color: #000;
							}
						}
					}

					.topRight {
						flex: 30%;

						.imgBox {
							margin-top: -55rpx;
							width: 114rpx;
							height: 114rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

		}

		&-bottom {
			margin-top: 26rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			width: 100%;
			// height: calc(100vh - 306rpx);
			// height: 100vh;
		}
	}
</style>